import { Card, Col, Flex, Row } from "antd";
import { useEffect, useState } from "react";
import "./contentinfo.css";

interface ContentInfoProps {
  key: string; label: string; tooltip: string; onClick: (e: any, msgId: string, tip: any) => void;
}

export default function ContentInfo({msgId, wordTips }: {msgId: string,wordTips: ContentInfoProps[]}) {
  const [userInfo, setUserInfo] = useState<any>({});
  useEffect(() => {
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
    setUserInfo(userInfo);
    console.log(userInfo);
  }, []);

  useEffect(() => {
    if (msgId) {
      console.log("tips msgId: \n", msgId);
    }
  }, [msgId]);

  return <div>
    <div style={{
      width: '800px',
      height: '300px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'left',
      alignItems: 'start',
      margin: '0 auto',
      marginTop: '101px'
    }}>
      <Row style={{
        fontSize: '30px', 
        fontWeight: 'bold',
        textAlign: 'left',
        width: '100%',
        marginBottom: '10px'
      }}>
        你好：{userInfo?.realname}
      </Row>
      <Row style={{
        fontSize: '30px',
        fontWeight: 'bold',
        color: 'GrayText',
        textAlign: 'left',
        width: '100%',
      }}>
        有什么能帮助您的吗？
      </Row>
      <Row style={{
        width: '100%',
      }}>
        <div className="wordTips" style={{justifyContent: wordTips && wordTips.length < 5 ? "center": "flex-start" }}>
        {wordTips.map((tip, index) => {
          if (index > 9) return;
          return (
            // <Col key={index} offset={index === 0 ? 0 : 1} span={5}>
            //   <Card hoverable style={{ backgroundColor: '#f6f6f6', width: '180px', height: '140px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'wrap', maxLines: 2 }}>
            //     <p>{tip.label}</p>
            //     <p>{tip.tooltip}</p>
            //     <br />
            //     提示词
            //   </Card>
            // </Col>
            <div key={index} className="item_tip" onClick={(e) => {
                tip.onClick(e, msgId, tip);
              }}>
              <div className="tip_content">
                <div className="tip_title tip_text_style" data-full={tip.label}>{tip.label}</div>
                <div className="tip_tooltip tip_text_style" data-full={tip.tooltip}>{tip.tooltip}</div>
              </div>
              <div className="cue_word_title">提示词</div>
            </div>
          )}
        )}
        </div>
      </Row>
    </div>
  </div>;
}

